<template>
  <section class="container_box">
    <container-box title="出勤统计">
      <div class="flex-between">
        <chart-ring id="chart1" :data="data" :vstyle="style" />
        <chart-ring id="chart2" :data="data2" :vstyle="style2" />
      </div>
    </container-box>

    <container-box title="气压检测">
      <div class="flex-between">
        <chart-board id="chart3" :data="data3" :vstyle="style3" />
      </div>
    </container-box>
  </section>
</template>

<script>
import chartRing from "@/components/chart-ring.vue";
import chartBoard from "@/components/chart-board.vue";

import containerBox from "@/components/box.vue";
// new Array(this.totalCount).fill().map((_, idx) => idx)

export default {
  components: {
    chartRing,
    chartBoard,
    containerBox,
  },
  data() {
    return {
      data: {
        value: 12.25,
        unit: "mm",
        remark: "位移",
        // 圆环的分段数
        subSum: 10,
      },
      data2: {
        value: "阿巴",
        unit: "dd",
        remark: "沉降",
      },
      data3: {
        value: 100,
        min: 0,
        max: 200,
      },
      style: {
        // 内圆半径 决定圆心的渐变球大小
        innerRadius: 37,
        // 外圆半径 环形宽度 = 外圆半径 - 内圆半径
        outerRadius: 44,
        // 渐变球的颜色
        cilcleColor: "#0f828d",
        // 边框、高亮颜色
        borderColor: "#22becc",
        // 圆环分段间隙颜色
        spaceColor: "#161a1f",
      },
      style2: {
        innerRadius: 37,
        outerRadius: 44,
        cilcleColor: "#04a289",
        borderColor: "#0cdfbf",
        spaceColor: "#161a1f",
      },
      style3: {
        outer: {
          startColor: "#0886dd",
          endColor: "#0be3f5",
        },
        inner: {
          startColor: "#08a784",
          endColor: "#00fdd2",
        },
        circle: {
          color: "#0dc0ce",
          centerColor: "#0095ff",
        },
        pointer: {
          startColor: "#0886dd",
          endColor: "#0be3f5",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.container_box {
  width: 100vw;
  height: 100vh;
  background-color: #2e3540;
}
</style>
